<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加数据</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <h3>添加油表当前数据显示</h3>
      </el-row>
      <div class="cards">
        <!-- <div> -->
        <div class="card"
             v-for="(item,index) in addChaiyouForm"
             :key='index'>
          <el-form :model="item"
                   :rules='addNameRule'
                   :ref="'ref' + index">
            <el-form-item :label="item.name"
                          prop="datas">
              <el-input v-model="item.datas"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <!----urea1添加第一号油数据---->
    <el-card>
      <el-row>
        <h3>尿素进出货情况</h3>
      </el-row>
      <div class="cus"
           v-for="(item,index) in ureaData"
           :key='index'>
        <h4>{{item.name}}数据添加</h4>
        <el-form :model="item"
                 :rules='addUrea1Rule'
                 :ref="'ref' + index">
          <el-form-item label="进货"
                        prop="enter">
            <el-input v-model="item.enter"></el-input>
          </el-form-item>
          <el-form-item label="出货"
                        prop="out">
            <el-input v-model="item.out"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-------添加资金收入情况------->
    <el-card>
      <el-row>
        <h3>添加散户收入数据</h3>
      </el-row>
      <div class="cards">
        <div class="card"
             v-for="(item,index) in addSanhuForm"
             :key='index'>
          <el-form :model="item"
                   :rules='addNameRule'
                   :ref="'ref' + index">
            <el-form-item :label="item.name"
                          prop="datas">
              <el-input v-model="item.datas"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <!---------油卡使用情况数据记录-------->
    <el-card>
      <el-row>
        <h3>油卡数据添加</h3>
      </el-row>
      <div class="cards">
        <div class="card"
             v-for="(item,index) in addCardsForm"
             :key='index'>
          <el-form :model="item"
                   :rules='addNameRule'
                   :ref="'ref' + index">
            <el-form-item :label="item.name"
                          prop="datas">
              <el-input v-model="item.datas"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </el-card>
    <el-card>
      <el-row>
        <h3>会员数据添加</h3>
      </el-row>
      <div class="cus"
           v-for="(item,index) in addCustomForm"
           :key='index'>
        <h4>{{item.name}}数据:</h4>
        <el-form :model="item"
                 :rules='addUrea1Rule'
                 :ref="'ref' + index">
          <el-form-item label="进货"
                        prop="enter">
            <el-input v-model="item.enter"></el-input>
          </el-form-item>
          <el-form-item label="出货"
                        prop="out">
            <el-input v-model="item.out"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!---选择日期----->
    <el-card>
      <div class="dates">
        <el-row>
          <h3>选择日期</h3>
        </el-row>
        <el-form :v-model="dateForm"
                 class="datesForm">
          <el-form-item label=""
                        prop="date">
            <el-date-picker placeholder="选择日期"
                            v-model="dateForm.date"
                            style="width:100%"
                            type="date">
            </el-date-picker>
          </el-form-item>

        </el-form>
      </div>
      <div style="text-align:left;margin-top:15px;">
        <el-button type="primary"
                   @click="add">新增数据</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { isNumber } from '../plugins/validate'
export default {
  name: "addData",
  data () {
    return {
      //销售情况，尿素数据
      ureaData: {},
      addUrea1Rule: {
        enter: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        out: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ]
      },
      //添加日期的表格
      dateForm: {
        date: new Date(),
        tz: 0,
        stringDate: ''
      },
      //油卡数据添加表
      addCardsForm: {},
      addNameRule: {
        datas: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ]
      },
      addSanhuForm: {},
      addChaiyouForm: {},
      //大客户数据添加
      addCustomForm: {},
    }
  },
  created () {
    this.findName()
  },
  methods: {
    findName () {
      this.findUreaName()
      this.findCustomName()
      this.findCardName()
      this.findSanhuName()
      this.findChaiyouName()
    },
    addMethod () {
      this.addUrea1Data() //添加尿素数据    
      this.addCardData() //添加油卡信息
      this.addCustomData()//添加客户数据
      this.addSanhuData() //散户数据录入
      this.addChaiyouData() //柴油数据录入
      this.$common.succ('恭喜，添加成功！')
    },
    add () {
      var flag = true
      for (let item in this.ureaData) {
        this.$refs['ref' + item][0].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      for (let item in this.addCustomForm) {
        this.$refs['ref' + item][0].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      for (let item in this.addSanhuForm) {
        this.$refs['ref' + item][0].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      for (let item in this.addCardsForm) {
        this.$refs['ref' + item][0].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      for (let item in this.addChaiyouForm) {
        this.$refs['ref' + item][0].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (!flag) {
        this.$common.fail('请填写正确的数据格式！')
        return
      }
      let url = '/api/checkAdd'
      const das = new Date()
      this.dateForm.tz = (-(das.getTimezoneOffset() / 60))
      this.dateForm.stringDate = this.dateForm.date.getFullYear() + '-' + (this.dateForm.date.getMonth() + 1) + '-' + this.dateForm.date.getDate()
      this.$http.post(url, this.$qs.stringify(this.dateForm)).then(res => {
        if (res.data === 1) {
          for (let item in this.ureaData) {
            this.ureaData[item].date = this.dateForm.date
            this.ureaData[item].stringDate = this.dateForm.stringDate
          }
          for (let item in this.addCustomForm) {
            this.addCustomForm[item].date = this.dateForm.date
            this.addCustomForm[item].stringDate = this.dateForm.stringDate
          }
          for (let item in this.addCardsForm) {
            this.addCardsForm[item].date = this.dateForm.date
            this.addCardsForm[item].stringDate = this.dateForm.stringDate
          }
          for (let item in this.addSanhuForm) {
            this.addSanhuForm[item].date = this.dateForm.date
            this.addSanhuForm[item].stringDate = this.dateForm.stringDate
          }
          for (let item in this.addChaiyouForm) {
            this.addChaiyouForm[item].date = this.dateForm.date
            this.addChaiyouForm[item].stringDate = this.dateForm.stringDate
          }
          this.addMethod()
        } else {
          this.$common.fail(res.data)
        }
      })
    },
    //查询尿素所有的类别
    findUreaName () {
      let url = '/api/findUreaName'
      this.$http.get(url).then(res => {
        let options = {}
        for (let i = 0; i < res.data.length; i++) {
          let names = ('addUreaForm' + i)
          let option = {
            name: res.data[i].name,
            enter: 0,
            out: 0,
            date: new Date(),
            stringDate: ''
          }
          options[names] = option
        }
        this.ureaData = options
      })
    },
    //增加尿素数据
    addUrea1Data () {
      let url = '/api/addUrea1'
      for (let item in this.ureaData) {
        this.$http.post(url, this.$qs.stringify(this.ureaData[item])).then(res => {
          if (res.status === 200) {
            // this.succ('恭喜，添加成功！')
          } else {
            // this.fail('对不起，添加失败')
          }
        })
      }
    },
    findSanhuName () {
      // let url = '/api/addSanhuData'
      let url = '/api/addSanhuName'
      this.$http.get(url).then(res => {
        let options = {}
        for (let i = 0; i < res.data.length; i++) {
          let names = ('addSanhuForm' + i)
          let option = {
            name: res.data[i].name,
            datas: 0,
            date: new Date(),
            stringDate: '',
            totals: 0

          }
          options[names] = option
        }
        this.addSanhuForm = options
      })
    },
    //添加散户数据录入
    addSanhuData () {
      let url = '/api/addSanhuData'
      let price = 0
      console.log(price)
      for (let item in this.addSanhuForm) {
        price += Number(this.addSanhuForm[item].datas)
      }
      for (let item in this.addSanhuForm) {
        this.addSanhuForm[item].totals = price
        this.$http.post(url, this.$qs.stringify(this.addSanhuForm[item])).then(res => {
          if (res.status === 200) {
            // this.succ('恭喜，添加成功！')
          } else {
            // this.fail('对不起，添加失败')
          }
        })
      }
    },
    //油卡数据添加
    addCardData () {
      let url = '/api/addCards'
      let price = 0
      console.log(price)
      for (let item in this.addCardsForm) {
        price += Number(this.addCardsForm[item].datas)
      }
      for (let item in this.addCardsForm) {
        this.addCardsForm[item].totals = price
        this.$http.post(url, this.$qs.stringify(this.addCardsForm[item])).then(res => {
          if (res.status === 200) {
            // this.succ('恭喜，添加成功！')
          } else {
            // this.fail('对不起，添加失败')
          }
        })
      }
    },
    //查询所有会员名称
    findCustomName () {
      let url = '/api/findCustomName'
      this.$http.get(url).then(res => {
        let options = {}
        for (let i = 0; i < res.data.length; i++) {
          let names = ('addCustom' + i)
          let option = {
            name: res.data[i].name,
            enter: 0,
            out: 0,
            date: new Date(),
            stringDate: ''
          }
          options[names] = option
        }
        this.addCustomForm = options
      })
    },
    ////////////油枪，柴油类型
    findChaiyouName () {
      let url = '/api/findChaiyouName'
      this.$http.get(url).then(res => {
        let options = {}
        for (let i = 0; i < res.data.length; i++) {
          let names = ('addChaiyou' + i)
          let option = {
            name: res.data[i].name,
            datas: 0,
            date: new Date(),
            stringDate: ''
          }
          options[names] = option
        }
        this.addChaiyouForm = options
      })
      // },
    },
    addChaiyouData () {
      let url = '/api/addChaiyouData'
      for (let item in this.addChaiyouForm) {
        this.$http.post(url, this.$qs.stringify(this.addChaiyouForm[item])).then(res => {
          if (res.status === 200) {
            this.$http.post('/api/addChaiyouShouyi', this.$qs.stringify(this.addChaiyouForm[item])).then(res => {
              // console.log(res)
              if (res.status === 200) {
                console.log('成功')
                // this.succ('恭喜，添加成功！')

              } else {
                // this.fail('对不起，添加失败')
              }
            })
          } else {
            // this.fail('对不起，添加失败')
          }
        })
      }
    },
    addCustomData () {
      let url = '/api/addCustom'

      for (let item in this.addCustomForm) {
        this.$http.post(url, this.$qs.stringify(this.addCustomForm[item])).then(res => {
          if (res.status === 200) {
            // this.succ('恭喜，添加成功！')
          } else {
            // this.fail('对不起，添加失败')
          }
        })
      }
    },
    findCardName () {
      let url = '/api/findCardName'
      this.$http.get(url).then(res => {
        let options = {}
        for (let i = 0; i < res.data.length; i++) {
          let names = ('addCard' + i)
          let option = {
            name: res.data[i].name,
            datas: 0,
            date: new Date(),
            stringDate: '',
            totals: 0
          }
          options[names] = option
        }
        this.addCardsForm = options
        // console.log(this.addCardsForm)
      })
    },
  }
}
</script>
<style scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-card {
  margin-bottom: 10px;
  padding-top: 0px;
}
h4 {
  text-align: left;
}
@media screen and (min-width: 1300px) {
  .el-row h3 {
    text-align: left;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
  }
  .el-form {
    display: flex;
  }
  .el-form-item {
    /* width: 19%; */
    /* float: left; */
    margin-left: 10px;
    display: flex;
    /* justify-content：center; */
    justify-content: space-between;
    white-space: nowrap;
  }
  .el-form-item .el-input {
    width: 50%;
    padding: 0 5px 0 0;
    display: inline;
  }
  .el-form-item label.el-form-item__label {
    white-space: nowrap;
  }
  .el-form {
    overflow: hidden;
    height: 60px;
  }
  .el-form-item__label {
    line-height: 30px !important;
    text-align: center;
  }
  .el-form-item__content {
    line-height: 30px !important;
    width: 50%;
  }
  .el-form-item__content {
    width: 50%;
  }
  .cus {
    display: flex;
    line-height: 40px;
    margin-top: 10px;
  }
  .cus h4 {
    font-size: 16px;
  }
  .dates {
    display: flex;
  }
  .cards {
    display: flex;
  }
  .el-form-item__content {
    line-height: 0;
  }
  span.el-input__prefix {
    top: auto !important;
  }
}
</style>